<template>
    <div class="file-upload-container">
		<div v-if="!multiple" class="img-container single-container" v-viewer>
			<img :src="$attrs.value | getFilePath" alt="" srcset="" :height="iconHeihgt" :width="iconWidth" style="display:block;min-height:50px;min-width:50px;">
			<!-- <i class="el-icon-close close-icon" @click.stop="clear"></i> -->
			<el-upload 
				ref="upload"
				:action="action"
				:headers="headers"
				:multiple="multiple"
				:on-success="success"
				:before-upload="beforeUpload"
				:show-file-list="false"
				:file-list="fileList"
				class="avatar-uploader"
				:data="{
					'type':actionType
				}"
				v-on="$listeners"
				v-bind="$attrs"
				>
					<i  class="el-icon-plus avatar-uploader-icon" :style="{width:iconWidth,height:iconHeihgt}"></i>
			</el-upload>
		</div>
		<div v-else class="multiple-container" v-viewer>
			<div v-for="item in $attrs.value" :key="item" class="img-container">
				<img :src="item | getFilePath" alt="" :key="item" :height="iconHeihgt" :width="iconWidth">
				<i class="el-icon-close close-icon" @click.stop="clear(item)"></i>	
				<!-- <el-link type="primary" @click="clear(item)">删除</el-link> -->
				<!-- <el-button @click="clear(item)">删除</el-button> -->
			</div>
			
			<el-upload 
				ref="upload"
				:action="action"
				:headers="headers"
				:multiple="multiple"
				:on-success="success"
				:before-upload="beforeUpload"
				:show-file-list="false"
				:file-list="fileList"
				class="avatar-uploader"
				:data="{
					'type':actionType
				}"
				v-on="$listeners"
				v-bind="$attrs"
				>
					<i  class="el-icon-plus avatar-uploader-icon" :style="{width:iconWidth,height:iconHeihgt}"></i>
			</el-upload>
		</div>
	</div>
</template>
<script>
import bus from "@/util/bus"
import {uploadMode,uploadModeType} from "@/config/upload"
export default {
	props:{
		actionType:{
			type:String,
			default:"images/avatar"
		},
		multiple:{
			type:Boolean,
			default:false,
		},
		fileType:{
			type:String,
			default:"image",
		},
		imageField:{
			type:String,
			default:"none"
		},
		saveMode:{
			type:String,
			default:uploadMode
		},
		width:{
			type:String,
			default:"100%"
		},
		height:{
			type:String,
			default:"100%"
		},
		iconWidth:{
			type:String,
			default:"50px"
		},
		iconHeihgt:{
			type:String,
			default:"50px"
		},
	},
	data(){
		let that = this
		return {
			headers:{
				token:localStorage.getItem("token")
			},
			beforeUpload:null,
			success: function(response,file) {
				// 控制只有一个文件
				if(!this.multiple){
					this.clearFiles()
					this.uploadFiles = [file]
				}
				console.log(bus)

				bus.$emit("updateData",{[that.imageField]:response})
			},
			fileList:[]
		}
	},
	methods:{
		clear(item){
			console.log("执行了clear")
			let newval = this.fileList.filter(val=>val.url!=item).map(val=>val.url)
			this.fileList = this.fileList.filter(val=>val.url!=item)
			// debugger
			bus.$emit("updateData",{[this.imageField]:newval})
			this.$emit("updateData",{[this.imageField]:newval})
		}
	},
	created(){
		if(this.$attrs.value instanceof Array){
			this.fileList = this.$attrs.value.map(item=>{
				return {
					name:item,
					url:item
				}
			})
		}else if(this.$attrs.value){
			this.fileList = [this.$attrs.value]
		}
		this.beforeUpload = (file)=>{
			console.log("终止合约",file)
			console.log(uploadModeType,uploadMode)
			let currentMode = uploadModeType[uploadMode]
			currentMode.upload(this.action,file,{key:"type",value:this.actionType}).then(response=>{
				console.log("sc",response)
				this.fileList.push({name:response,url:response.replace(currentMode.target,currentMode.tag)})
				// this.$refs.upload.uploadFiles[this.$refs.upload.uploadFiles.length-1].response = 
				// 控制只有一个文件
				if(!this.multiple){
					this.$refs.upload.clearFiles()
					this.$refs.upload.uploadFiles = [file]
					response = response.replace(currentMode.target,currentMode.tag)
					console.log(response)
					bus.$emit("updateData",{[this.imageField]:response})
					this.$emit("updateData",{[this.imageField]:response})
				}else{
					this.$refs.upload.uploadFiles = this.fileList
					let img_list = this.$refs.upload.uploadFiles.map(item=>{
						return item.url
					})
					bus.$emit("updateData",{[this.imageField]:img_list})
					this.$emit("updateData",{[this.imageField]:img_list})
				}
				
			})
			return false
		}
	},
	computed:{
		action(){
			return process.env.VUE_APP_UPLOAD_URL + "/" + this.fileType
		}
	}
}
</script>

<style scoped lang="less">
.avatar-uploader /deep/ .el-upload .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .avatar {
    width: 50px;
    height: 50px;
    display: block;
  }
  .img-container{
	position: relative;
  }
  .img-container .close-icon{
	position: absolute;
	right: 0;
	top: 1px;
   }
   .multiple-container{
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		img{
			margin: 0 10px 10px 0;
		}
	}
	.single-container{
		display: flex;
		// align-items: center;
		flex-wrap: wrap;
		width: 100%;
		img{
			margin-right: 10px;
			margin-bottom: 10px;
		}
	}
   .file-upload-container{
	display: flex;
   }
</style>